<template>
  <div
    class="relative h-screen bg-white dark:zinc-800 text-center xl:bg-zinc-200"
  >
    <!-- 图标位置 -->
    <HeaderVue></HeaderVue>
    <!-- 表单 -->
    <div
      class="block px-3 xl:py-4 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 sl:rounded-sm xl:shadow-lg"
    >
      <h3
        class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300 xl:block"
      >
        账号登录
      </h3>
      <!-- 表单 -->
      <VeeForm @submit="onSubmit">
        <!-- 用户名 -->
        <VeeField
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-v-zinc-200 xl:default:bg-zinc-900"
          type="text"
          name="username"
          placeholder="用户名"
          autocomplete="on"
          :rules="validateUsername"
          v-model="loginForm.username"
        />
        <VeeErrorMessage
          class="text-sm text-red-600 block mt-0.5 text-left"
          name="username"
        />
        <!-- 密码 -->
        <VeeField
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-v-zinc-200 xl:default:bg-zinc-900"
          type="password"
          name="password"
          placeholder="密码"
          autocomplete="on"
          :rules="validatePassword"
          v-model="loginForm.password"
        />
        <VeeErrorMessage
          class="text-sm text-red-600 block mt-0.5 text-left"
          name="password"
        />
        <!-- 跳转按钮 -->
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a
            @click="onToRegister"
            class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer"
          >
            去注册
          </a>
        </div>
        <!-- 登录按钮 -->
        <m-button
          :loading="loading"
          class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
        >
          登录
        </m-button>
      </VeeForm>
      <!-- 第三方登录 -->
      <div class="flex justify-around mt-4">
        <!-- QQ登录 -->
        <!-- <m-svg-icon class="w-4 cursor-pointer" name="qq"></m-svg-icon> -->
        <qq-login-vue></qq-login-vue>
        <!-- 微信登录 -->
        <weixin-login-vue></weixin-login-vue>
      </div>
    </div>
    <!-- 人类行为验证 -->
    <SliderCaptchaVue
      v-if="captchaVisile"
      @captchaClose="captchaVisile = false"
      @captchaSuccess="captchaSuccess"
    ></SliderCaptchaVue>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import QqLoginVue from './qq-login.vue'
import WeixinLoginVue from './weixin-login.vue'
const router = useRouter()
const store = useStore()
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import { validateUsername, validatePassword } from '../validate.js'
import HeaderVue from '../components/header.vue'
import SliderCaptchaVue from './sliderCaptcha.vue'
import { LOGIN_TYPE_USER } from '@/constants'

const captchaVisile = ref(false)
const loading = ref(false)
const loginForm = reactive({
  username: 'xuwenqiang',
  password: '123456789'
})

// 触发登录
const onSubmit = () => {
  captchaVisile.value = true
}
const captchaSuccess = () => {
  captchaVisile.value = false
  // 执行登录操作
  handleLogin()
}

const handleLogin = async () => {
  loading.value = true
  try {
    await store.dispatch('user/onLogin', {
      ...loginForm,
      loginType: LOGIN_TYPE_USER
    })
    router.push('/')
  } finally {
    loading.value = false
  }
}
const onToRegister = () => {
  store.commit('app/changeRouterType', 'push')
  router.push('/register')
}
</script>
<style scoped lang="scss"></style>
